<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__static__/assets/css/layui.css">
    <link rel="stylesheet" href="__static__/assets/css/view.css"/>
    <script src="__static__/Common/jquery.min.js"></script>
    <script src="__static__/assets/layui.js"></script>
    <script src="__static__/Common/vue.js"></script>
    <title></title>
    <style>
        .layui-row>div{
            padding-top: 40px;
            font-size: 16px;
        }
    </style>
</head>

<body class="layui-view-body">
<div class="layui-content" id="app">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <div class="layui-form layui-form-item">
                        <div style="border-radius: 50%;border: 1px solid #b8bfcc;width: 100px;height: 100px;text-align: center;overflow: hidden;position: relative; left: 0;right: 0;top: 0; bottom: 0;margin: auto">
                            <img :src="baseUrl+userinfodata.Head" width="100" style="position: absolute;left: 0;right: 0;top: 0; bottom: 0;margin: auto" >
                        </div>
                        <div class="layui-row" style="margin-left: 30px;" >
                            <div class="layui-col-xs6">
                                <div class="grid-demo grid-demo-bg1">
                                    姓名：<span v-text="userinfodata.Name"></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo">
                                    性别：<span v-text="userinfodata.Sex "></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo grid-demo-bg1">
                                    生日日期：<span v-text="userinfodata.Birthday" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo">
                                    学号：<span v-text="userinfodata.StudentID" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo grid-demo-bg1">
                                    身份证号：<span v-text="userinfodata.IdCard" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo">
                                    电话号码：<span v-text="userinfodata.Telephone" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo grid-demo-bg1">
                                    QQ：<span v-text="userinfodata.QQ" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo">
                                    邮箱地址：<span v-text="userinfodata.Email" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo grid-demo-bg1">
                                    年级：<span v-text="userinfodata.Grade" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo">
                                    系别：<span v-text="userinfodata.Department" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo grid-demo-bg1">
                                    班级：<span v-text="userinfodata.Class" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo">
                                    寝室号：<span v-text="userinfodata.DormitoryId" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo grid-demo-bg1">
                                    加入时间：<span v-text="userinfodata.ApplyTime" ></span>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo">
                                    所属部门：<span v-text="userinfodata.PrimaryDepartmentA+','+userinfodata.PrimaryDepartmentS "></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="layui-btn" style="margin-left: 38%">修改资料</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            "userinfodata":"",
            baseUrl:"__static__"
        },
        methods: {
        },
        computed: {
        },
        filters: {
        },
        mounted: function () {
            var then = this;
            $.ajax({
                type: "post",
                url: "api/getuserInfo",
                async: true,
                contentType: "application/json",
                success: function (resp) {
                    then.userinfodata =resp.data;
                },
                error:function(err){
                    console.log(err)
                }
            });
        }
    })
</script>
</html>